<template>
    <div id="goods">
        <h3>添加商品</h3>
        <div>
            <p>
                <label><i>*&nbsp;</i>商品编号&nbsp;</label>
                <input type="text" v-model.number.lazy="goods.id">
            </p>
            <p>
                <label><i>*&nbsp;</i>商品名称&nbsp;</label>
                <input type="text" v-model.trim.lazy="goods.name">
            </p>
            <p>
                <label><i>*&nbsp;</i>商品数量&nbsp;</label>
                <input type="text" v-model.number.lazy="goods.count">
            </p>
            <p>
                <label><i>*&nbsp;</i>商品单价&nbsp;</label>
                <input type="text" v-model.number.lazy="goods.price">
            </p>
            <p>
                <label><i>*&nbsp;</i>商品信息&nbsp;</label>
                <input type="text" v-model.trim.lazy="goods.desc">
            </p>
        </div>
        <button class="add" @click="addToList">添加商品</button>
        <button class="reset" @click="resetList">重置内容</button>
        <table border="0" cellspacing="0">
            <tr>
                <th width="200" height="100">商品编号</th>
                <th width="200" height="100">商品名称</th>
                <th width="200" height="100">商品数量</th>
                <th width="200" height="100">商品单价</th>
                <th class="sh" width="200" height="100">商品信息</th>
                <th width="200" height="100">是否删除</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
                <td width="200" height="160">{{item.id}}</td>
                <td width="200" height="160">{{item.name}}</td>
                <td width="200" height="160">{{item.count}}</td>
                <td width="200" height="160">{{item.price}}</td>
                <td width="200" height="160">{{item.desc}}</td>
                <td width="200" height="160">
                    <button @click="onDeleteList(item.id)" class="delete">删除商品</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
    import {request} from '../../network/request'
    // import { mapMutations } from 'vuex';
    const defaultGoods = { // 商品数据结构
        id: '',
        name: '',
        price: '',
        count: '',
        desc: '',
    }
    export default {
        // name: "Good",
        data() {
            return {
                goods: {
                    id: '',
                    name: '',
                    count: '',
                    price: '',
                    desc: ''
                },
                list: []
            }
        },
        methods: {
            judgeSubmit() {
                if (this.goods.id != 0 &&
                    this.goods.name != '' &&
                    this.goods.count != 0 &&
                    this.goods.price != 0 &&
                    this.goods.desc != '') {
                    return true
                }
                alert('请填写完整信息')
                return false
            },
            addToList() {
                // let _this = this;
                if (this.judgeSubmit()) {
                    request({
                        method: 'post',
                        url: '/api/v1/shop/addItem',
                        data: {
                            "itemName": "xiaohongxie",
                            "itemID": 1,
                            "itemDis": "yes,this is xiaohongxie",
                            "itemNum": 13,
                            "itemValue": 3343
                        },
                    }).then(res => {
                        console.log('连接成功');
                        this.list.push(res.data)
                    })
                    // data存储数据, 浅拷贝
                    const data = {
                        ...this.goods
                    }
                    // 添加id
                    // console.log(data);
                    // data.id = Date.now()
                    // 尾部插入
                    this.list.push(data)
                    // console.log(this.list)
                    // 重置表单
                    this.resetList()
                }
            },
            resetList() {
                this.goods = {
                    ...defaultGoods
                }
            },
            onDeleteList(id) {
                const index = this.list.findIndex(item => item.id === id)
                this.list.splice(index, 1)
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #goods {
        margin: -1px 50px;
        border: 1px solid #333;
        /* margin-top: -10vh; */
        margin-left: -120px;
        width: 100%;
        background: linear-gradient(45deg, #98cbff, #98ffcb);
    }

    #goods h3 {
        padding: 10px 0 10px 0;
        font: 16px/1 "微软雅黑";
        text-align: center;
    }

    #goods p {
        margin: 30px 0 0 70px;
    }

    #goods p label {
        display: inline-block;
        width: 120px;
        text-align: right;
        font: 15px/1 "微软雅黑";
    }

    #goods p label i {
        color: #f56c6c;
    }

    #goods p select {
        width: 320px;
        height: 40px;
        outline: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        text-indent: 20px;
        /* color: #DCDFE6; */
    }

    #goods p select option {
        font-size: 16px;
    }

    #goods p input {
        width: 800px;
        height: 40px;
        outline: none;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        text-indent: 20px;
        /* color: #DCDFE6; */
    }

    button {
        display: inline-block;
        width: 80px;
        height: 40px;
        outline: none;
    }

    .add {
        border: 1px solid #409eff;
        background-color: #ecf5ff;
        border-radius: 5px;
        color: #409eff;
        cursor: pointer;
        margin: 20px 40px 20px 200px;
    }

    .reset {
        border: 1px solid #43C088;
        background-color: #ecf5ff;
        border-radius: 5px;
        color: #43C088;
        cursor: pointer;
        margin: 20px 40px 20px 40px;
    }

    .delete {
        border: 1px solid #933DA1;
        background-color: #BF8EC6;
        border-radius: 5px;
        color: #933DA1;
        cursor: pointer;
    }

    table {
        text-align: center;
    }

    th,
    td {
        border: 1px solid #DCDFE6;

    }

    .img {
        display: block;
        width: 200px;
        height: 160px;
    }

    .ml140 {
        margin-left: 140px;
    }

    input {
        margin-left: 10px;
    }
</style>